<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="app-title">高安百事通</text>
      <view class="header-icons">
        <text class="icon">⋯</text>
        <text class="icon">─</text>
        <text class="icon">◎</text>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input class="search-input" v-model="searchKeyword" placeholder="找工作、找服务、求职找房子" />
        <button class="search-btn" @click="performSearch">搜索</button>
      </view>
    </view>

    <!-- 统计数据 -->
    <view class="stats-section">
      <view class="stat-item">
        <view class="stat-dot blue"></view>
        <text class="stat-label">浏览</text>
        <text class="stat-value">153261.9万</text>
      </view>
      <view class="stat-item">
        <view class="stat-dot green"></view>
        <text class="stat-label">发布</text>
        <text class="stat-value">2.6万</text>
      </view>
      <view class="stat-item">
        <view class="stat-dot red"></view>
        <text class="stat-label">分享</text>
        <text class="stat-value">32.6万</text>
      </view>
      <button class="help-btn">帮助</button>
    </view>

    <!-- 导航图标 -->
    <view class="nav-section">
      <view class="nav-row">
        <view class="nav-item" @click="navigateToCategory('recruit')">
          <view class="nav-icon green">
            <text class="icon-text">👤</text>
            <view class="hot-tag">热</view>
          </view>
          <text class="nav-label">求职招聘</text>
        </view>
        <view class="nav-item" @click="navigateToCategory('house')">
          <view class="nav-icon red">
            <text class="icon-text">🏠</text>
            <view class="new-tag">新</view>
          </view>
          <text class="nav-label">房屋租售</text>
        </view>
        <view class="nav-item" @click="navigateToCategory('second')">
          <view class="nav-icon blue">
            <text class="icon-text">💼</text>
          </view>
          <text class="nav-label">二手买卖</text>
        </view>
        <view class="nav-item" @click="navigateToCategory('vehicle')">
          <view class="nav-icon blue">
            <text class="icon-text">🚗</text>
          </view>
          <text class="nav-label">车辆买卖</text>
        </view>
        <view class="nav-item" @click="navigateToCategory('service')">
          <view class="nav-icon blue">
            <text class="icon-text">⏰</text>
          </view>
          <text class="nav-label">生活服务</text>
        </view>
      </view>
      <view class="nav-row">
        <view class="nav-item" @click="navigateToCategory('lost')">
          <view class="nav-icon blue">
            <text class="icon-text">🔍</text>
          </view>
          <text class="nav-label">寻物打听</text>
        </view>
        <view class="nav-item" @click="navigateToCategory('pet')">
          <view class="nav-icon orange">
            <text class="icon-text">🐾</text>
          </view>
          <text class="nav-label">家有宠物</text>
        </view>
        <view class="nav-item" @click="navigateToCategory('carpool')">
          <view class="nav-icon orange">
            <text class="icon-text">🚗</text>
          </view>
          <text class="nav-label">同城拼车</text>
        </view>
        <view class="nav-item" @click="navigateToCategory('business')">
          <view class="nav-icon red">
            <text class="icon-text">🏪</text>
          </view>
          <text class="nav-label">生意转让</text>
        </view>
        <view class="nav-item" @click="navigateToCategory('promotion')">
          <view class="nav-icon red">
            <text class="icon-text">💰</text>
          </view>
          <text class="nav-label">优惠活动</text>
        </view>
      </view>
    </view>

    <!-- 公告栏 -->
    <view class="announcement-section">
      <text class="announcement-label">公告</text>
      <view class="announcement-content">
        <text class="announcement-text">[08-14]空也发布了信息</text>
      </view>
    </view>

    <!-- 内容标签页 -->
    <view class="tabs-section">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === index }"
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="switchTab(index)"
      >
        <text class="tab-text">{{ tab.name }}</text>
      </view>
    </view>

    <!-- 内容列表 -->
    <view class="content-list">
      <view class="content-item" v-for="(item, index) in contentList" :key="index" @click="goToDetail(item)">
        <view class="item-left">
          <image class="item-avatar" :src="item.avatar" mode="aspectFill"></image>
          <view class="item-tag" :class="getTagClass(item.tag)">{{ item.tag }}</view>
        </view>
        <view class="item-center">
          <view class="item-title">
            <text class="title-text">{{ item.title }}</text>
            <view class="pinned-tag" v-if="item.pinned">置顶</view>
          </view>
          <text class="item-date">{{ item.date }}</text>
          <view class="item-details">
            <view class="detail-item" v-for="(detail, dIndex) in item.details" :key="dIndex">
              <text class="detail-label">{{ detail.label }}：</text>
              <text class="detail-value">{{ detail.value }}</text>
            </view>
          </view>
        </view>
        <view class="item-right">
          <button class="call-btn" @click="makeCall(item)">打电话</button>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav">
      <view class="nav-tab active" @click="navigateToTab('home')">
        <text class="nav-icon">🏠</text>
        <text class="nav-text">首页</text>
      </view>
      <view class="nav-tab publish" @click="navigateToTab('publish')">
        <text class="publish-icon">+</text>
        <text class="nav-text">发布</text>
      </view>
      <view class="nav-tab" @click="navigateToTab('mine')">
        <text class="nav-icon">👤</text>
        <text class="nav-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      activeTab: 0,
      tabs: [
        { name: '最新发布', key: 'all' },
        { name: '求职招聘', key: 'recruit' },
        { name: '房屋租售', key: 'house' },
        { name: '二手买卖', key: 'second' },
        { name: '车辆买卖', key: 'vehicle' }
      ],
      contentList: [
        {
          avatar: '/static/images/profile.jpg',
          tag: '招聘',
          title: '手游充值 (微信 置顶)',
          date: '2025-08-14',
          pinned: true,
          details: [
            { label: '公司位置', value: '' },
            { label: '招聘岗位', value: '跨境电商客服' },
            { label: '招聘行业', value: '其他' },
            { label: '公司名称', value: '高安市凝儿科技有限公司' },
            { label: '招聘类型', value: '全职' },
            { label: '公司类型', value: '公司' },
            { label: '招聘白班 晚班', value: '跨境电商客服,能接受晚班的优先 岗位' },
            { label: '要求', value: '月休2天。18~30岁之间对...' },
            { label: '联系人', value: '彭晨' }
          ]
        },
        {
          avatar: '/static/images/profile.jpg',
          tag: '房屋',
          title: '高安市区精装修三室两厅出租',
          date: '2025-08-13',
          pinned: false,
          details: [
            { label: '房屋类型', value: '三室两厅' },
            { label: '装修情况', value: '精装修' },
            { label: '楼层', value: '6/18层' },
            { label: '朝向', value: '南北通透' },
            { label: '租金', value: '2800元/月' },
            { label: '押金', value: '押一付三' },
            { label: '联系人', value: '李女士' }
          ]
        },
        {
          avatar: '/static/images/profile.jpg',
          tag: '二手',
          title: '九成新iPhone 14 Pro Max转让',
          date: '2025-08-12',
          pinned: false,
          details: [
            { label: '商品名称', value: 'iPhone 14 Pro Max' },
            { label: '成色', value: '九成新' },
            { label: '容量', value: '256GB' },
            { label: '颜色', value: '深空黑' },
            { label: '价格', value: '6500元' },
            { label: '购买时间', value: '2024年3月' },
            { label: '联系人', value: '张先生' }
          ]
        },
        {
          avatar: '/static/images/profile.jpg',
          tag: '车辆',
          title: '2019年大众朗逸自动挡轿车',
          date: '2025-08-11',
          pinned: false,
          details: [
            { label: '车型', value: '大众朗逸' },
            { label: '年份', value: '2019年' },
            { label: '变速箱', value: '自动挡' },
            { label: '排量', value: '1.5L' },
            { label: '里程', value: '5.2万公里' },
            { label: '价格', value: '8.5万元' },
            { label: '联系人', value: '王师傅' }
          ]
        },
        {
          avatar: '/static/images/profile.jpg',
          tag: '优惠活动',
          title: '高安卫眼世家,专注眼睛视力健康服务',
          date: '2025-06-09',
          pinned: false,
          details: [
            { label: '业务分类', value: '其他广告' },
            { label: '广告类型', value: '服务推广' },
            { label: '价格说明', value: '面议' },
            { label: '交易方式', value: '仅支持快递2' },
            { label: '宝贝成色', value: '全新宝贝2' },
            { label: '付款方式', value: '仅现金2' },
            { label: '联系人', value: '伍女士' }
          ]
        }
      ]
    }
  },
  methods: {
    getTagClass(tag) {
      const tagClasses = {
        '招聘': 'tag-recruit',
        '房屋': 'tag-house',
        '二手': 'tag-second',
        '车辆': 'tag-vehicle',
        '优惠活动': 'tag-promotion'
      };
      return tagClasses[tag] || 'tag-default';
    },
    switchTab(index) {
      this.activeTab = index;
      // 这里可以根据标签页筛选内容
      console.log('切换到标签页:', this.tabs[index].name);
    },
    makeCall(item) {
      // 这里可以添加打电话的逻辑
      console.log('拨打电话给:', item.details.find(d => d.label === '联系人')?.value || '未知联系人');
      uni.showToast({
        title: '拨打电话功能',
        icon: 'none'
      });
    },
    navigateToCategory(category) {
      console.log('导航到分类:', category);
      // 这里可以根据分类跳转到相应页面或筛选内容
      if (category === 'promotion') {
        // 跳转到优惠活动页面
        uni.navigateTo({
            url: '/pages/promotion/index'
          });
      } else if (category === 'carpool') {
        // 跳转到同城拼车列表
        uni.navigateTo({
            url: '/pages/carpool/index'
          });
      } else {
        uni.showToast({
          title: `进入${this.getCategoryName(category)}`,
          icon: 'none'
        });
      }
    },
    getCategoryName(category) {
      const categoryNames = {
        'recruit': '求职招聘',
        'house': '房屋租售',
        'second': '二手买卖',
        'vehicle': '车辆买卖',
        'service': '生活服务',
        'lost': '寻物打听',
        'pet': '家有宠物',
        'carpool': '同城拼车',
        'business': '生意转让',
        'promotion': '优惠活动'
      };
      return categoryNames[category] || '未知分类';
    },
    navigateToTab(tab) {
      console.log('导航到标签页:', tab);
      // 这里可以根据标签页跳转到相应页面
      if (tab === 'publish') {
        uni.showToast({
          title: '发布功能',
          icon: 'none'
        });
      } else if (tab === 'mine') {
        uni.showToast({
          title: '我的页面',
          icon: 'none'
        });
      }
    },
    performSearch() {
      if (!this.searchKeyword.trim()) {
        uni.showToast({
          title: '请输入搜索关键词',
          icon: 'none'
        });
        return;
      }
      // 这里可以添加搜索逻辑
      console.log('搜索关键词:', this.searchKeyword);
      uni.showToast({
        title: `搜索: ${this.searchKeyword}`,
        icon: 'none'
      });
    },
    goToDetail(item) {
      // 跳转到优惠活动详情页面
      uni.navigateTo({
        url: `/pages/promotion/detail?id=${item.id || 1}`
      });
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 顶部标题栏 */
.header {
  background-color: #4CAF50;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-title {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.header-icons {
  display: flex;
  gap: 20rpx;
}

.icon {
  color: white;
  font-size: 32rpx;
}

/* 搜索栏 */
.search-section {
  background-color: #4CAF50;
  padding: 0 30rpx 30rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 50rpx;
  padding: 20rpx 30rpx;
}

.search-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
}

.search-btn {
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 25rpx;
  padding: 15rpx 30rpx;
  font-size: 28rpx;
}

/* 统计数据 */
.stats-section {
  background-color: white;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.stat-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
}

.stat-dot.blue { background-color: #2196F3; }
.stat-dot.green { background-color: #4CAF50; }
.stat-dot.red { background-color: #F44336; }

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.stat-value {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.help-btn {
  background-color: #f0f0f0;
  border: none;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  color: #666;
}

/* 导航图标 */
.nav-section {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.nav-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.nav-row:last-child {
  margin-bottom: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
}

.nav-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 15rpx;
}

.nav-icon.green { background-color: #4CAF50; }
.nav-icon.red { background-color: #F44336; }
.nav-icon.blue { background-color: #2196F3; }
.nav-icon.orange { background-color: #FF9800; }

.icon-text {
  font-size: 40rpx;
}

.hot-tag, .new-tag {
  position: absolute;
  top: -5rpx;
  right: -5rpx;
  background-color: #F44336;
  color: white;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 10rpx;
}

.nav-label {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

/* 公告栏 */
.announcement-section {
  background-color: white;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.announcement-label {
  background-color: #F44336;
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 15rpx;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.announcement-content {
  background-color: #f0f0f0;
  padding: 15rpx 20rpx;
  border-radius: 10rpx;
  flex: 1;
}

.announcement-text {
  font-size: 26rpx;
  color: #666;
}

/* 标签页 */
.tabs-section {
  background-color: white;
  display: flex;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  padding: 25rpx 0;
  text-align: center;
  border-bottom: 4rpx solid transparent;
}

.tab-item.active {
  border-bottom-color: #4CAF50;
}

.tab-text {
  font-size: 28rpx;
  color: #333;
}

.tab-item.active .tab-text {
  color: #4CAF50;
  font-weight: bold;
}

/* 内容列表 */
.content-list {
  background-color: white;
}

.content-item {
  display: flex;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.item-left {
  margin-right: 20rpx;
  position: relative;
}

.item-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.item-tag {
  position: absolute;
  bottom: -5rpx;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 10rpx;
}

.tag-recruit {
  background-color: #4CAF50;
}

.tag-house {
  background-color: #F44336;
}

.tag-second {
  background-color: #2196F3;
}

.tag-vehicle {
  background-color: #FF9800;
}

.tag-promotion {
  background-color: #E91E63;
}

.tag-default {
  background-color: #FFC107;
}

.item-center {
  flex: 1;
  margin-right: 20rpx;
}

.item-title {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.title-text {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-right: 15rpx;
}

.pinned-tag {
  background-color: #FFC107;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
}

.item-date {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.item-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.detail-item {
  display: flex;
  align-items: flex-start;
}

.detail-label {
  font-size: 24rpx;
  color: #4CAF50;
  min-width: 120rpx;
}

.detail-value {
  font-size: 24rpx;
  color: #333;
  flex: 1;
}

.item-right {
  display: flex;
  align-items: center;
}

.call-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 25rpx;
  padding: 15rpx 25rpx;
  font-size: 26rpx;
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #4CAF50;
  display: flex;
  padding: 15rpx 0;
  z-index: 1000;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.nav-tab.active {
  color: #FFEB3B;
}

.nav-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}

.nav-text {
  font-size: 22rpx;
}

.nav-tab.publish {
  position: relative;
}

.publish-icon {
  background-color: #4CAF50;
  color: white;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50rpx;
  font-weight: bold;
  border: 4rpx solid white;
  margin-bottom: 8rpx;
}
</style>
